<template>
  <div class="product-comment">
    <div class="total">
      全部评价
      <span class="score">{{ commentInfo.score }}分</span>
    </div>

    <div class="container">
      <div v-for="item in commentInfo.array" :key="item.id" class="comment-item">
        <div class="heading">
          <div class="account">
            <van-image round width="25px" height="25px" :src="item.avatar" />
            <span class="name">{{ item.author }}</span>
            <div v-show="item.hot" class="hot">精</div>
          </div>

          <div class="time">{{ item.time }}</div>
        </div>

        <div class="content">
          <div class="star">
            <van-rate v-model="item.star" readonly size="12" color="#FF7002" />
            <span>{{ item.star.toFixed(1) }}</span>
          </div>

          <div class="info">{{ item.content }}</div>
        </div>
      </div>
    </div>

    <list-finished />
  </div>
</template>

<script>
import Vue from 'vue'
import { Image as VanImage, Rate } from 'vant'
import ListFinished from '@/components/ListFinished'

Vue.use(VanImage).use(Rate)

export default {
  components: {
    ListFinished
  },

  data() {
    return {
      commentInfo: {
        score: '4.9',
        array: [
          {
            id: 0,
            avatar: '',
            author: '长大成人',
            hot: true,
            time: '2020-06-20',
            star: 5,
            content:
              '有20%的人选择了留学，有70%的人选择了继续国内深造有20%的人选择了留学，有70%的人选择了继有70%的人选择了继续国内深造有20%。'
          },
          {
            id: 1,
            avatar: '',
            author: '长大成人',
            hot: false,
            time: '2020-06-20',
            star: 5,
            content:
              '有20%的人选择了留学，有70%的人选择了继续国内深造有20%的人选择了留学，有70%的人选择了继有70%的人选择了继续国内深造有20%。'
          }
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.product-comment {
  padding: 25.5px 17px;

  .total {
    font-size: 17px;
    font-weight: 500;
    color: #333333;

    .score {
      color: #4586ff;
      margin-left: 6px;
    }
  }

  .container {
    margin-top: 16.5px;

    .comment-item {
      margin-bottom: 35px;

      .heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        .account {
          display: flex;
          align-items: center;

          .name {
            font-size: 14px;
            color: #333333;
            margin: 0 5px 0 13px;
            font-weight: 500;
          }

          .hot {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ff7002;
            color: #ffffff;
            font-size: 11px;
            width: 17.5px;
            height: 17.5px;
            border-radius: 2.5px;
          }
        }

        .time {
          font-size: 13px;
          color: #999999;
          font-weight: 300;
        }
      }

      .content {
        margin-left: 36.5px;

        .star {
          margin: 4px 0 9px 0;
          span {
            font-size: 10px;
            color: #999999;
            margin-left: 6px;
          }
        }

        .info {
          font-size: 13px;
          color: #666666;
          line-height: 22px;
        }
      }
    }
  }
}
</style>
